<!--
 * @Author: wangshuguang
 * @Date: 2022-03-28 17:55:50
 * @LastEditTime: 2022-04-15 13:28:41
 * @LastEditors: wangshuguang
 * @Description: 收入记录详情
-->
<template>
	<div>
		<!-- 顶部内容 -->
		<div class="head">
			<div class="title">实退￥{{ dataForm['realRefundFee'] }}</div>
			<div>退款备注：{{ dataForm['remark'] }}</div>
		</div>
		<!-- 退款记录 -->
		<!-- <div class="formBox refundList">
      <div class="formLabel">退款记录：</div>
      <div class="formValue">
        <div v-if="refundList.length">
          <div v-for="item of refundList" :key="item.id">
            <span>{{ item.refundStatus }}</span>
            <span>{{ item.refundFee }}</span>
            <span>{{ item.createTime }}</span>
            <el-button type="text">详情</el-button>
          </div>
        </div>
        <div v-else>
          无
        </div>
      </div>
    </div> -->
		<!-- 订单详情 -->
		<el-row>
			<el-col :span="12" class="leftDetail">
				<!-- <div v-for="item of leftDetail" :key="item.key" class="formBox">
					<div class="formLabel">{{ item.label }}：</div>
					<div class="formValue">{{ dataForm[item.key] }}</div>
				</div> -->
				<div class="formBox">
					<div class="formLabel">退款方式：</div>
					<div class="formValue">{{ dataForm.refundMethodZh }}</div>
				</div>
				<div class="formBox">
					<div class="formLabel">退款状态：</div>
					<div class="formValue">{{ dataForm.refundStatusZh }}</div>
				</div>
				<div class="formBox">
					<div class="formLabel">退款单号：</div>
					<div class="formValue">{{ dataForm.refundNo }}</div>
				</div>
				<div v-if="dataForm.refundStatusZh !== '退款成功'" class="formBox">
					<div class="formLabel">退款失败原因：</div>
					<div class="formValue">{{ dataForm.remark }}</div>
				</div>
				<div class="formBox">
					<div class="formLabel">支付单号：</div>
					<div class="formValue">{{ dataForm.paymentNo }}</div>
				</div>
				<div class="formBox">
					<div class="formLabel">业务单号：</div>
					<div class="formValue">{{ dataForm.orderNo }}</div>
				</div>
				<div class="formBox">
					<div class="formLabel">业务类型：</div>
					<div class="formValue">{{ dataForm.typeZh }}</div>
				</div>
				<div class="formBox">
					<div class="formLabel">用户信息：</div>
					<div class="formValue">{{ dataForm.customerName }}</div>
				</div>
				<div class="formBox">
					<div class="formLabel">退款门店：</div>
					<div class="formValue">{{ dataForm.operatorName }}</div>
				</div>
			</el-col>
			<el-col :span="12">
				<div class="rightTopDetail">
					<div class="formBox ">
						<div class="formLabel">原订单金额：</div>
						<div class="formValue">￥{{ dataForm['totalFee'] }}</div>
					</div>
					<div class="formBox ">
						<div class="formLabel">申请退款金额：</div>
						<div class="formValue">￥{{ dataForm['refundFee'] }}</div>
					</div>
					<!-- <div class="formBox ">
						<div class="formLabel">退款状态：</div>
						<div class="formValue">{{ dataForm['refundStatusZh'] }}</div>
					</div> -->
				</div>
				<div class="rightBottomDetail">
					<div class="formBox ">
						<div class="formLabel">实退：</div>
						<div class="formValue">￥{{ dataForm['realRefundFee'] }}</div>
					</div>
					<!-- <div class="formBox ">
						<div class="formLabel">退款顾客：</div>
						<div class="formValue">{{ dataForm['customerName'] }}</div>
					</div> -->
					<div class="formBox ">
						<div class="formLabel">退款经办人：</div>
						<div class="formValue">{{ dataForm['operatorName'] }}</div>
					</div>
				</div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
import { qryRefundListByOrderNo } from '@/api/payCenter';
import {qryPubRefundRecord} from '@/api/payCenterPub'
export default {
	props: {
		infoConfig: {}
	},
	data() {
		return {
			refundList: [],
			dataForm: {
				num: 1
			},
			leftDetail: [
				{ label: '退款方式', key: 'refundMethodZh' },
				{ label: '退款状态', key: 'refundStatusZh' },
				{ label: '退款单号', key: 'refundNo' },
				{ label: '退款失败原因', key: 'remark' },
				{ label: '支付单号', key: 'paymentNo' },
				{ label: '业务单号', key: 'orderNo' },
				{ label: '业务类型', key: 'typeZh' },
				{ label: '用户信息', key: 'customerName' },
				// { label: '原业务订单来源', key: 'sourceZh' },
				// { label: '退款提交时间', key: 'createTime' },
				// { label: '退款成功时间', key: 'updateTime' },

				// { label: '退款业务', key: 'typeZh' },
				{ label: '退款门店', key: 'operatorName' }
				// { label: '使用插件', key: 'pluginCodeZh' }
			]
		};
	},
	mounted() {
		let params = {
			refundNo:this.infoConfig.refundNo
		}
		qryPubRefundRecord(params).then(res => {
			this.refundList = res.data;
			this.dataForm = res.data.pageList.list[0]
		});
	}
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.head {
	border-bottom: 1px solid #ddd;
	padding-bottom: 20px;
	margin-bottom: 20px;
	.title {
		font-size: 25px;
		display: flex;
		align-content: center;
		justify-content: space-between;
		margin-bottom: 20px;
	}
}
.refundList {
	padding: 20px 0;
	border: 1px solid #ddd;
	border-right: none;
	border-left: none;
	margin: 20px 0;
}
.rightTopDetail {
	border-bottom: 1px solid #ddd;
}
.leftDetail {
	border-right: 1px solid #ddd;
}
.formBox {
	display: flex;
	justify-content: space-between;
	line-height: 40px;
	.formLabel {
		width: 150px;
		text-align: right;
		font-weight: bold;
	}
	.formValue {
		flex: 1;
		text-align: right;
		padding-right: 20px;
	}
}
</style>
